<template>
  <div class="view-container">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>汇总统计</span>
        </div>
        <div class="header-form">

          <div class="header-form-item">
            <el-select v-model="searchForm.month" placeholder="月份" @change="fetchData">
              <el-option label="请选择月份" value=""></el-option>
              <el-option v-for="item in monthList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-select v-model="searchForm.year" placeholder="年份" @change="fetchData">
              <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <div class="header-form-item">
            <el-select v-model="searchForm.departmentId" placeholder="部门" @change="fetchData">
              <el-option label="请选择部门" value=""></el-option>
              <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>

        </div>
      </div>
    </header>
    <section>
      <el-table
        ref="table"
        :data="tableData"
        border
        stripe
      >
        <el-table-column label="姓名" width="150" align="center" >
          <!--                <template slot-scope="s">
                            <el-link @click="showDetail(s.row.userId)">{{s.row.userName}}</el-link>
                          </template>-->
        </el-table-column>
        <el-table-column label="加班天数" align="center" sortable></el-table-column>
      </el-table>
    </section>

    <el-dialog title="加班详情" :visible.sync="dialog.show">
      <el-table
        ref="table"
        :data="detailTableData"
        border
        stripe
      >
        <el-table-column prop="jiaBanRenName" label="申请人" align="center" width="100"/>
        <el-table-column prop="jiaBanYuanYin" label="事由" align="left"  >
          <template slot-scope="s">
            <el-link @click="showDetail(s.row.jiaBanId)">{{s.row.jiaBanYuanYin}}</el-link>
          </template>
        </el-table-column>
        <el-table-column sortable width="150" :formatter="startTimeFmt" prop="startTime" label="开始时间" align="center"/>
        <el-table-column sortable width="150" :formatter="endTimeFmt" prop="endTime" label="结束时间" align="center"/>
        <el-table-column sortable width="100" prop="stateName" label="状态" align="center">
          <template slot-scope="s">
            <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <footer class="detail-footer">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="detailPage.total"
          :page-size="detailPage.size"
          @size-change="handleSizeChangeDetail"
          @current-change="handleCurrentChangeDetail"
        />
      </footer>
    </el-dialog>
  </div>
</template>

<script>
  import departmentAPI from '@/api/system/department'
  import jiaBanAPI from '@/api/workOvertime/workOvertime'
  import listMixin from '@/mixin/listMixin'
  import flowManagerListMixin from '@/mixin/flowManagerListMixin'
  import flowTongJiMixin from '@/mixin/flowTongJi'
  export default {
    name: 'JiaBanTongJi',
    mixins: [flowTongJiMixin,flowManagerListMixin,listMixin],
    data() {
      return {
        searchForm:{
          departmentId:'',
        },
        departmentList:[],
      }
    },
    created() {
      this.getDepartmentList()
    },
    methods: {
      fetchData(){
        jiaBanAPI.tongji(this.searchForm.departmentId,this.searchForm.year,this.searchForm.month).then(res=>{
          console.log(res)
          this.tableData = res.result
          this.page.total = res.total
        })
      },
      getDepartmentList(){
        departmentAPI.getSelectList().then(res=>{
          this.departmentList = res.result
        })
      },
      getDetailList(){
        jiaBanAPI.getListByUid(
          this.curSelected,
          this.searchForm.year,
          this.searchForm.month,
          this.detailPage.index,
          this.detailPage.size
        ).then(res=>{
          this.detailTableData = res.records
          this.detailPage.total = res.total
        })
      },
      startTimeFmt(row){
        return this._util.format(row.startTime)
      },
      endTimeFmt(row){
        return this._util.format(row.endTime)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
